<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input id="input1" type="text">
    <script>
        //这里有一个疑惑，为什么要使用闭包？
        // 原因是 timer 变量是在 debounce 函数内部初始化的时候声明的，但是之后每一次触发返回的箭头函数的时候都需要读取 timer 变量，所以要使用闭包

        // 还有一个疑惑，为什么要使用 func.apply(this, arguments) 而不直接使用 func()？
        // 原因是每次调用箭头函数的时候为了确保上下文环境为当前的 this，就需要使用 apply 语法
        // input防抖
        const input1 = document.getElementById('input1')
        function debounce(fn, time) {
            let timer = null
            return function () {
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(() => {
                    //模拟触发change事件
                    fn.apply(this, arguments)
                    // 清空计时器
                    timer = null
                }, time);
            }
        }
        input1.addEventListener('keyup', debounce(() => {
            console.log(input1.value)
        }, 500))


        // 节流代码
        function throtte(func, time) {
            let activeTime = 0;
            return () => {
                const current = Date.now();
                if (current - activeTime > time) {
                    func.apply(this, arguments);
                    activeTime = Date.now();
                }
            };
        }

    </script>
</body>

</html>